iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
1
Modern Web

喪屍黑白切系列 第 7

Day 07 | 有沒有別的辦法? - 不使用多重背景

  • 分享至 

  • xImage
  •  

昨天介紹了多重背景的用法,
今天想挑戰一樣的畫面,用不同的方法做出來。

切版沒有絕對的對跟錯,只有適合什麼情境或是在什麼條件下相比起來比較好,多嘗試練習才能發掘新的可能

本篇關鍵字

  • position
  • ::before, ::after
  • border

範例檔

範例圖片跟 HTML 我就不放上來了,跟昨天的一樣。
CSS

.banner {
  width: 100%;
  height: 600px;
  background: url('https://images.unsplash.com/photo-1541781774459-bb2af2f05b55?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1342&q=80')no-repeat center top/cover;
  position: relative;
}

.banner h2 {
  color: white;
  font-size: 50px;
  position: absolute;
  left: 40px;
  bottom: 20px;
}

.banner::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  border-width: 0 900px 240px 0;
  border-style: solid;
  border-color: transparent transparent rgba(177, 120, 68, .6) transparent;
}

.banner::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  border-width: 0 0 570px 570px;
  border-style: solid;
  border-color: transparent transparent rgba(177, 120, 68, .6) transparent;
}

喪屍分解

  • 利用 ::before, ::after 來製作裝飾性用途的內容,搭配 position 將物件定位於畫面中。

  • 此次使用的 border CSS

    border-width: /* top right bottom left */
    border-style: /* top right bottom left */
    border-color: /* top right bottom left */
    /* 常見簡寫 */
    border: /* border-width border-style border-color */
    
  • border 若是只有設定單一值,表示上右下左皆是相同設定

  • 利用一個空 div 來做三角形的範例

    div {
      position: relative;
    }
    
    div::after {
      content:'';
      position: absolute;
      border-width: 10px 20px 10px 20px;
      border-style: solid;
      border-color: black blue red green;
    }
    

    RESULT

    codepen

  • border 只要再搭配 transparent 使用,便能製作出所需的三角形

以上就是今天的內容,如果有講不對的地方再請各位留言讓我知道,謝謝。
明天要講的是不規則邊緣。


上一篇
Day 06 | 就是那麼有層次 - 多重背景
下一篇
Day 08 | 看我的影分身 - 不規則邊緣
系列文
喪屍黑白切30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言